
<template>
	<div class="order-Details-main">
		<mt-header :title="$route.meta.title" fixed></mt-header>
		<!-- nav -->
		<div class="order-Details-li">
			<ul>
				<li v-for="(item,index) in orderLi" v-bind:class="item.id===nowId?'li-active':''" v-on:click="TabNav(item.id)">
					{{item.name}}
				</li>
			</ul>
		</div>
		<!-- content -->
		<div class="order-content">
			<div>

        <div class="content-box-for" v-for="item in list">
          <router-link :to="{name:'taskAcceptBrowse',params:{id:item.id},query:{mainType:item.mainType,buyTaskId:item.id,publishTime:item.publishTime}}">
            <div class="order-content-box">
              <!-- left -->
              <div class="content-box-left" @click.stop>
                <!--<i-m-g-scale :imgSrc="imgUrl(item.goodsmainimg)"></i-m-g-scale>-->
                <img :src="imgUrl(item.goodsmainimg)" alt="" title=""/>
              </div>
              <!-- right -->
              <div class="content-box-right">
                <div class="box-right-title" >
                  <span class="img-box"><img src="static/imgs/taobao.png" alt="" title=""/></span>
                  <span class="text">{{item.goodsName}}</span>
                </div>
                <!-- 状态 -->
                <div class="box-right-content">
                  <div class="box-right-t">
										<span>
											<a><img src="static/imgs/qian.png" alt="" title=""/></a>
											<a class="s-color">{{item.reward}}</a>
										</span>
                    <span>{{item.publishTime}}</span>
                  </div>
                  <!--  -->
                  <div class="box-right-s">
										<span>
											<a>状态 :</a>
											<a>{{status[item.status]}}</a>
										</span>
                    <!-- <router-link v-if="nowId!==-1" :to="{name:'complaint',params:{id:item.id},query:{mainType:item.mainType,buyTaskId:item.id,publishTime:item.publishTime}}">
                      <span class="btn">申诉</span>
                    </router-link> -->
                    <router-link v-if="nowId!==70&&nowId!==-1&&nowId!==10&&nowId!==30" :to="{name:linkName(),params:{id:item.taskkeyId},query:{mainType:item.mainType,buyTaskId:item.id,publishTime:item.publishTime}}">
                      <span class="btn">操作</span>
                    </router-link>
										<a v-if="nowId===30" @click.stop.prevent="onMoneyPress(item.id)">
                      <span class="btn">催款</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </router-link>

					</div>
			</div>
			<!-- no list -->
		<div class="order-auto" v-show="list.length===0">
			<div class="order-img-no">
        <img src="static/imgs/dingdan.png" alt="" title=""/>
      </div>
			<p>暂时还没相关订单哦~~</p>
		</div>
		</div>

		<!-- fixed -->
		<div class="fixed-nav">
			<index-footer></index-footer>
		</div>
	</div>
</template>

<script>
	import IndexFooter from '@/components/base/IndexFooter'
  import IMGScale from '@/components/base/IMGScale'
  import listMixins from '../../mixins/listMixins'
  import baseMixins from '../../mixins/base'
  import {taskService} from '#/service'
	export default{
		name:'orderDetails',
		data(){
			return{
        screen:{
          status:0,
          pageIndex:0,
          pageSize:10,
        },
        status:{
          0:"待操作",
          10:"待发货",
          20:"待评价",
          30:"评价待审核",
          50:"刷手撤销",
          60:"系统撤销",
          70:"已完成",

        },
				orderLi:[
					{
						name:'待操作',
						id:0
					},
					{
						name:'待发货',
						id:10
					},

					{
						name:'待评价',
						id:20
					},
					{
						name:'待审核',
						id:30
					},

          {
            name:'已完成',
            id:70
          },
          {
            name:'所有',
            id:-1
          }
				],
				nowId:0,
				Boole:true,
        type:0,
				SHowToggle:false,
				fullHeight: document.documentElement.clientHeight,
			}
		},
    created(){
		  this.nowId=this.$route.query.type*1||0
      this.screen.status=this.nowId
    },
		methods:{
		  async query(id){
		    let scree=Object.assign({},this.screen)
        if(id===5){
		      delete scree.status
        }
        return await taskService.receivedTask({
          params:scree
        })
      },
      linkName(){
		    if( this.nowId===0){
		      return 'taskOperation'
        }else if(this.nowId==20){
          return 'comment'
        }

      },
			TabNav:async function(el){
				this.nowId = el;
				this.screen.status=el
				let data=await this.query(el);
				if(data&&data.code===0){
				  this.list=data.data
        }
			},
			onMoneyPress(id){
		  	taskService.pressMoney({data: {id}})
      },
		},
    mixins:[listMixins,baseMixins],

		components: {
			IndexFooter,
      IMGScale
		}
	}
</script>

<style>
	html,body{
		width: 100%;
		height: 100%;
	}
	.order-Details-main{
		width: 100%;
		height: 100%;
		min-height: 4rem;
		overflow-y: auto;
	}
	.order-Details-li{
		width: 100%;
		height: 0.38rem;
		background: white;
		border-bottom: 0.01rem solid #e6e6e6;
	}
	.order-Details-li li{
		width: 16.66%;
		height: 0.36rem;
		line-height: 0.36rem;
		float:left;
		text-align: center;
		color: #333;
		font-size: 0.12rem;
	}
	.order-Details-li .li-active{
		border-bottom: 0.02rem solid rgb(142,10,190);
	}
	.order-content{
		width: 100%;
		height: 100%;
    min-height: calc(100vh - 40px - 0.38rem - 0.5rem);
		position: relative;
		overflow-y: auto;
		padding-bottom: 0.5rem;
	}
	.order-content-box{
		width: 92%;
		margin: 0 auto;
	}
	.content-box-for{
		width: 100%;
		height: 1.22rem;
		background: white;
		float:left;
		border-bottom: 0.01rem solid #e6e6e6;
	}
	.content-box-left{
		width: 0.96rem;
		height: 0.96rem;
		float:left;
		margin:0.15rem 0.1rem 0 0;
	}
	.content-box-left img{
		display: block;
		width: 100%;
	}
	.content-box-right{
		float: left;
		width: 2.35rem;
		height: auto;
	}
	.box-right-title{
		width: 100%;
		height: auto;
		margin-top: 0.15rem;
		overflow: hidden;
		border-bottom: 0.01rem dashed #adadad;
	}
	.box-right-title span{
    float: left;
		display: block;
		color:#adadad;
		font-size: 0.12rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
	}
	.box-right-title .img-box{
		width: 0.17rem;
		height: 0.17rem;
		margin-right: 0.05rem;
	}
  .box-right-title .text{
    width: 2rem;
  }
	.box-right-title .img-box img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.box-right-content{
		width: 100%;
		float:left;
		margin-top: 0.1rem;
	}
	.box-right-t{
		width: 100%;
		height: 0.2rem;
		line-height: 0.2rem;
	}
	.box-right-t span{
		display: block;
		float: left;
		margin-right: 0.1rem;
		color: #333;
		font-size: 0.12rem;
	}
	.box-right-t span a{
		display: inline-block;
		float:left;
		font-size: 0.12rem;
		color:#faad45
	}
	.box-right-t span a:first-child{
		width: 0.12rem;
		height: 0.12rem;
		margin:0.01rem 0.05rem 0 0;
	}
	.box-right-t span a:first-child img{
		width: 100%;
		display: block;
	}
	.box-right-s{
		width: 100%;
		height: 0.27rem;
		margin-top: 0.1rem;
		line-height: 0.22rem;
		float: left;
	}
	.box-right-s span{
		display: block;
		float:left;
	}
	.box-right-s span a{
		display: inline-block;
		float:left;
		color: #4097ff;
		font-size: 0.12rem;
		margin-right: 0.05rem;
	}
	.box-right-s span a:last-child{
		margin-right: none;
	}
	.box-right-s .btn{
		width: 0.75rem;
		height: 0.22rem;
		float: right;
		line-height: 0.22rem;
		background:rgb(142,10,190);
		text-align: center;
		color: white;
		font-size: 0.12rem;
		border-radius: 0.05rem;
	}
	.order-auto{
		width: 50%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
	}
	.order-img-no{
		width: 1.12rem;
		height: 0.75rem;
		margin: 1.5rem auto 0 auto;
	}
	.order-img-no img{
		display: block;
		width: 100%;
		height: 100%;
	}
	.order-auto p{
		font-size: 0.16rem;
	    text-align: center;
	    padding-top: 20px;
	    color: #777
	}
</style>
